<template>
	<view>
		<view class="">
			<!-- 添加商品分类 -->
			<view
				style="display: flex;width: 700rpx;background-color: white;border-radius: 20rpx;margin: 20rpx auto 0 auto;align-items: center;height: 100rpx;"
				@click="zeng_gai_fenlei()">
				<uni-icons style="margin-left: 35rpx;margin-right: 20rpx;" type="plusempty" size="20"></uni-icons>
				添加分类！
			</view>
			<view v-if="is_goodsfenlei_list==0">
				没有分类
			</view>
			<view v-else v-for="(item,index) in goodsfenlei_list" :key="index"
				style="display: flex; align-items: center; overflow: hidden; width:700rpx;height: 100rpx; margin: 15rpx auto 15rpx auto;border-radius:15rpx;box-shadow: 2rpx 2rpx 3rpx 4rpx #c2c2c2;"
				@click="zeng_gai_fenlei(item)">
				<!-- <image style="width: 100rpx;height: 100rpx;border-radius:15rpx;" :src="item.url" mode=" scaleToFill"></image> -->
				<view style="display: flex;margin: 0 20rpx 0 20rpx;">
					{{item.name}}
				</view>
				<view :style="{display: 'flex',fontSize: '23rpx',marginTop: '30rpx',marginRight:'5rpx',width:'50rpx',height:'30rpx',justifyContent:'center',alignItems:'center',color:'white',borderRadius:'8rpx',backgroundColor:item1==1?'#4CAF50':item1==2?'#F44336':'#9C27B0'}" v-for="(item1,index1) in item.weizhi">
					{{item1}}
				</view>
			</view>
		</view>
		<!-- 下面是点 添加/修改 商品分类 使用 -->
		<model v-if='add_fenlei_show' @colseModel='add_fenlei_show = false'>
			<view style="display:flex;padding: 40rpx;flex-direction: column;">
				<view style="display: flex;flex: 3;justify-content: center;font-weight: 700;">
					{{zeng_gai?'修改商品分类':'添加商品分类'}}
				</view>
			</view>
			<view style="margin-top: 20rpx;margin-bottom: 20rpx;">
				请选择分类
			</view>
			<checkbox-group
				style="display: flex;justify-content: space-between;width: 80%;margin: 20rpx auto 20rpx auto;"
				@change="checkboxChange">
				<label style="display: flex;align-items: center;" v-for="item in items" :key="item.value">
					<view>
						<!-- 使用checkbox组件并绑定选中状态 -->
						<checkbox :value="item.value" :checked="checkedValues.includes(item.value)" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</checkbox-group>

			<view style="display: flex;margin:30rpx 0 20rpx 0;">商品分类名称</view>
			<input style="padding: 15rpx 25rpx; border-radius: 9rpx;box-shadow: 1px 1px 5px #c2c2c2;font-size: 25rpx;"
				type="text" v-model="fenlei_name" focus placeholder="请输入商品分类的名称">
			<view  style="margin-top: 20rpx;margin-bottom: 20rpx;">
				分类图标上传（阿里图库下载64大小png格式）
			</view>
			<!-- <view
				style="display: flex; margin-left: 190rpx;border-radius: 50%;background-color: #c2c2c2;color: white;width: 50rpx;height: 50rpx;justify-content: center;align-items: center;">
				X
			</view> -->
			<view v-if="pic_show" >
				<view @click="delpic1()"
					style="position: absolute;z-index: 99; display: flex;z-index: 99; width: 50rpx;height: 50rpx;border-radius: 50%;background-color: darkgray;color: white;justify-content: center;align-items: center;margin: 0 0 0 155rpx;">
					X
				</view>
				<image 
					style="display: flex; width:200rpx;height: 200rpx;margin-right: 10rpx;margin-bottom: 10rpx; border-radius: 15rpx;"
					:src="fenlei_tubiao[0].url" mode="">
				</image>
			</view>
			<uni-file-picker v-if="pic_upload_show" limit="1" :del-icon="true" :imageStyles="imageStyles"
				file-mediatype="image" v-model="fenlei_tubiao" @success="fanhuiurl" @select="select" @delete="delpic">
			</uni-file-picker>
			<view style="display: flex;flex-direction: row;margin-top: 80rpx;justify-content: center;">
				<view
					style="display: flex;width: 120rpx;border-radius: 15rpx;background-color: blue;color: white;justify-content: center;align-items: center;padding: 10rpx;"
					@click="tijiaogoods">
					{{zeng_gai?'修改':'提交'}}
				</view>
				<view
					style="display: flex;width: 120rpx;border-radius: 15rpx;background-color: blue;color: white;justify-content: center;align-items: center;margin-left: 60rpx;padding: 10rpx;"
					@click="add_fenlei_show = false">
					返回
				</view>
			</view>
			<view v-if="zeng_gai" style="display: flex;color: dodgerblue;margin-top: 50rpx;justify-content: center;"
				@click="shan_fenlei(fenlei_id)">
				删除分类
			</view>
		</model>
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js';
	import model from '../../components/model.vue'
	export default {
		components: {
			model
		},
		data() {
			return {
				jingshouren: '',
				is_upload: 0, //判断是否上传图片
				pic_show: false, //判断图片是否显示
				pic_upload_show: false, //判断图片上传窗口是否显示
				// 存储选中值的数组（初始化可设置默认值）
				current: null,
				items: [{
						value: "1",
						name: '分类1'
					},
					{
						value: "2",
						name: '分类2'
					},
					{
						value: "3",
						name: '分类3'
					}
				],
				// 存储选中值的数组（初始化可设置默认值）
				checkedValues: [],
				fenlei_tubiao: [{url:''}],
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "blue",
						width: 2,
						style: 'dashed',
						radius: '12px'
					}
				},
				meiyi_userinfo: [],
				goodsdetail: '',
				fenlei: '请选择分类',
				goods_fenlei_lists: [],
				imageStyles: {
					width: 140,
					height: 140,
					border: {
						radius: '20rpx'
					}
				},
				goodsfenlei_list: [],
				add_fenlei_show: false, //添加商品分类时弹窗
				fenlei_tupian_show: true, //修改商品分类时，图片是否显示
				file_picker_show: false, //修改商品分类时，图片上传窗口是否显示
				is_goodsfenlei_list: 9, //是否有商品分类列表
				fenlei_name: '', //商品分类名称
				goods_price: '', //商品分类价格
				fenlei_url: '', //商品分类图片的地址
				zeng_gai: '', //判断修改还是提交
				fenlei_id: '', //商品分类的ID
			}
		},
		async onLoad() {
			let meiyi_name_tel = await uni.getStorageSync('meiyi_name_tel')
			this.meiyi_userinfo = await uniCloud.getCurrentUserInfo()
			this.jingshouren = meiyi_name_tel.name + meiyi_name_tel.mobile
			this.cha_fenleifun()
		},
		methods: {
			delpic1() {
				// 删除存储空间中的图片
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 0,
						picurl:[this.fenlei_tubiao[0].url]
					}
				}).then(res => {})
				// 删除tupian_url中第n个元素
				if (this.fenlei_tubiao.length == 1) {
					this.fenlei_tubiao = []
					this.pic_show = false
					this.pic_upload_show = true
				} else {
					this.fenlei_tubiao.splice(n, 1)
				}
			},
			// 删除照片
			delpic(e) {
				console.log(e);
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 0,
						picurl: [e.tempFile.fileID]
					}
				}).then(res => {
					this.shu2 = ""
				})
			},
			// 图片选择时
			select() {
				this.is_upload = 0
				// this.fenlei_tubiao = ""
			},
			// 上传成功返回
			fanhuiurl(e) {
				this.is_upload = 1
			},
			//获取分类
			cha_fenleifun() {
				// this.goodsfenlei_list=[]
				uni.showLoading({
					title: "分类获取中……"
				})
				uniCloud.callFunction({
					name: "funshare",
					data: {
						leixing: 38, //获取商品分类
						tiaojian: {}
					}
				}).then(res => {
					uni.hideLoading()
					if (res.result.data.length == 0) {
						this.is_goodsfenlei_list = 0
					}
					this.goodsfenlei_list = res.result.data
					console.log(this.goodsfenlei_list);

				})
			},
			//提交或修改商品分类
			tijiaogoods() {
				if (!this.fenlei_name) {
					uni.showToast({
						title: '请填写分类名称',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.is_upload && !this.zeng_gai) {
					uni.showToast({
						title: '请等待图片上传完成',
						icon: 'none',
						duration: 1000
					})
					return
				}
				this.add_fenlei_show = false
				uni.showLoading({
					title: "商品分类提交中……",
					mask: true
				})
				if (this.zeng_gai) {
					if (this.yuan_fenleiname == this.fenlei_name && this.yuan_fenlei_tubiao == this.fenlei_tubiao) {
						this.file_picker_show = false
						uni.hideLoading()
						return
					}
					let shuju = {
						update_time: getDateTime.dateTimeStr('y-m-d h:i:s'),
						name: this.fenlei_name,
						jingshouren: this.jingshouren,
						fenlei_tubiao: this.fenlei_tubiao,
						weizhi: this.checkedValues
					}
					uniCloud.callFunction({
						name: "funshare",
						data: {
							leixing: 39, //改--商品分类
							id: this.fenlei_id,
							shuju: shuju
						}
					}).then(res => {
						uni.hideLoading()
						this.fenlei_name = this.zeng_gai = this.fenlei_id = ''
						this.fenlei_tubiao = []
						this.file_picker_show = false
						this.cha_fenleifun()
					})
				} else {
					let shuju = {
						update_time: getDateTime.dateTimeStr('y-m-d h:i:s'),
						name: this.fenlei_name,
						jingshouren: this.jingshouren,
						fenlei_tubiao: this.fenlei_tubiao,
						weizhi: this.checkedValues
					}
					uniCloud.callFunction({
						name: "funshare",
						data: {
							leixing: 40, //增--商品分类
							shuju: shuju
						}
					}).then(res => {
						this.file_picker_show = false
						this.fenlei_name = this.zeng_gai = ''
						this.fenlei_tubiao = []
						uni.hideLoading()
						this.cha_fenleifun()
					})
				}
			},
			//点击进入商品分类修改页面
			zeng_gai_fenlei(e) {
				this.fenlei_name = this.zeng_gai = this.fenlei_id = ''
				this.fenlei_tubiao = []
				this.checkedValues = []
				if (e) {
					this.pic_show=true
					this.pic_upload_show=false
					this.yuan_fenleiname = this.fenlei_name = e.name
					this.yuan_fenlei_tubiao = this.fenlei_tubiao = e.fenlei_tubiao
					this.yuan_fenlei_weizhi = this.fenlei_weizhi = e.weizhi || []
					this.fenlei_id = e._id
					this.checkedValues = e.weizhi || []
					this.zeng_gai = e.name
				}else{
					this.pic_upload_show=true
				}
				this.add_fenlei_show = true
			},
			// 查分类下有没有商品
			cha_fenleigoods(e) {
				const tiaojian = {}
				uniCloud.callFunction({
					name: "fun1",
					data: {
						leixing: 0,
						picurl: this.fenlei_tubiao[0].fileID
					}
				}).then(res => {})
			},
			//删除本分类
			async shan_fenlei(e) {
				await this.cha_fenleigoods(e)
				uni.showLoading({
					title: "删除中……",
					mask: true
				})
				this.add_fenlei_show = false
				// 删除图片
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 0,
						picurl: [this.fenlei_tubiao[0].fileID]
					}
				}).then(res => {})
				//删除本条记录
				uniCloud.callFunction({
					name: "funshare",
					data: {
						id: this.fenlei_id,
						leixing: 41, //删除本条记录
					}
				}).then(res => {
					this.cha_fenleifun()
				})
			},
			checkboxChange(e) {
				console.log(e);
				// 获取选中值数组（自动包含/排除当前操作项）
				this.checkedValues = e.detail.value

				// 示例：打印当前选中项
				console.log('当前选中:', this.checkedValues)
			}
		}
	}
</script>

<style>

</style>